﻿<!DOCTYPE html>
<html class="no-js" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="meta description">

    <title>购物车</title>
  <link rel="shortcut icon" type="image/x-icon" th:href="@{/img/timg.jpg}" media="screen"/>
<!--== Google Fonts ==-->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700" rel="stylesheet">
<link rel="stylesheet" th:href="@{/css/alert.css}">
    <!--=== Bootstrap CSS ===-->
<link th:href="@{/assets2/css/vendor/bootstrap.min.css}" rel="stylesheet">
<!--=== Font-Awesome CSS ===-->
<link th:href="@{/assets2/css/vendor/font-awesome.css}" rel="stylesheet">
<!--=== Plugins CSS ===-->
<link th:href="@{/assets2/css/plugins.css}" rel="stylesheet">
<!--=== Helper CSS ===-->
<link th:href="@{/assets2/css/helper.min.css}" rel="stylesheet">
<!--=== Main Style CSS ===-->
<link th:href="@{/assets2/css/style.css}" rel="stylesheet">

<link rel="stylesheet" th:href="@{/css/default.css}">

<link rel="stylesheet" th:href="@{/css/singleShop.css}">
<!-- Modernizer JS -->
<script th:src="@{/assets2/js/vendor/modernizr-2.8.3.min.js}"></script>

  <!--[if lt IE 9]>
<script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>

<div th:insert="~{shopIndex::header}"></div>

<div class="page-breadcrumb-wrap">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="page-breadcrumb">
          <ul class="nav">
            <li><a th:href="@{/shopIndex}">主页</a></li>
            <li><a href="#" class="active">购物车</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="page-content-wrapper">
  <div class="container">
    <!-- Cart Page Content Start -->
    <div class="row">
      <div class="col-lg-12">
        <!-- Cart Table Area -->
        <div class="cart-table table-responsive">
          <table class="table table-bordered">
            <thead>
            <tr>
              <th class="pro-thumbnail">图片</th>
              <th class="pro-title">商品名</th>
              <th class="pro-price">数量</th>
              <th class="pro-price">库存量</th>
              <th class="pro-quantity">价格(元)</th>
              <th class="pro-subtotal">支付</th>
              <th class="pro-remove">删除</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="indent:${indents}">
              <td class="pro-thumbnail"><a href="#"><img class="img-fluid" th:src="${indent.getPhone().getPhonePictures().get(0).getPicAddress()}" alt="Product"/></a></td>
              <td class="pro-title"><a href="#" th:text="${indent.getPhone().getpName()}"></a></td>
              <td class="pro-quantity">
                <div class="pro-qty">1</div>
              </td>
              <div th:switch="${indent.getPhone().getpResidue()}">
                <td class="pro-quantity" th:case="0"><span class="text-success">库存不住</span></td>
                <td class="pro-quantity" th:case="*"><span class="text-success" th:text="${indent.getPhone().getpResidue()}"></span></td>
              </div>
              <td class="pro-price"><span th:text="${indent.getPhone().getpPrice()}"></span></td>
              <td class="pro-subtotal"><a th:href="@{/payment/{id}(id=${indent.getoId()})}" class="btn-add-to-cart">去支付</a></td>
              <td class="pro-remove"><a href="#"><i class="fa fa-trash-o" th:onclick="'javascript:del('+${indent.getoId()}+')'" data-toggle="modal" data-target="#myModal"></i></a></td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="products-settings-option d-block d-md-flex">
          <nav class="page-pagination" style="text-align: right">
            <ul class="pagination" id="page">
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">是否删除</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <form action="" method="post" id="deleteForm">
          <input type="hidden" name="_method" value="DELETE">
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="delete">确认</button>
      </div>
    </div>
  </div>
</div>

<div th:insert="~{shopIndex::footer}"></div>

<!-- Scroll to Top Start -->
<a href="#" class="scrolltotop"><i class="fa fa-angle-up"></i></a>
<!-- Scroll to Top End -->

<!--=======================Javascript============================-->
<!--=== Jquery Min Js ===-->
<script th:src="@{/assets2/js/vendor/jquery-3.3.1.min.js}"></script>
<!--=== Jquery Migrate Min Js ===-->
<script th:src="@{/assets2/js/vendor/jquery-migrate-1.4.1.min.js}"></script>
<!--=== Popper Min Js ===-->
<script th:src="@{/assets2/js/vendor/popper.min.js}"></script>
<!--=== Bootstrap Min Js ===-->
<script th:src="@{/assets2/js/vendor/bootstrap.min.js}"></script>
<!--=== Ajax Mail Js ===-->
<script th:src="@{/assets2/js/ajax-mail.js}"></script>
<!--=== Plugins Min Js ===-->
<script th:src="@{/assets2/js/plugins.js}"></script>

<!--=== Active Js ===-->
<script th:src="@{/assets2/js/active.js}"></script>
<script th:src="@{/js/bootstrap-paginator.js}"></script>
<script th:src="@{/js/alert.js}"></script>
<script th:inline="javascript">
  var currentPage = [[${currentPage}]];	//当前页
  var totalPages = [[${totalPages}]];
  $("#page").bootstrapPaginator({
    bootstrapMajorVersion:3, 	//对应的bootstrap版本
    currentPage: currentPage, 		//当前页数
    numberOfPages: 6, 		//每次显示页数
    totalPages:totalPages, 	//总页数
    shouldShowPage:true,	//是否显示该按钮
    useBootstrapTooltip:true,
    //点击事件
//    onPageClicked: function (event, originalEvent, type, page) {
//      window.location.href = "/calendar?page="+page;
//    }
    pageUrl: function(type, page, current){
      if (page==current) {
        return "javascript:void(0)";
      } else {
        return "/indent?page="+page;
      }
    }
  });

  function del(id) {
    $("#deleteForm").attr("action","/indent/"+id);
  }
  $("#delete").click(function () {
    $("#deleteForm").submit();
  })
</script>
</body>
</html>
